<template>
    <div class="account-container">
        <div class="account-resetpwd">
            <div style="display: flex;flex-direction: column;">
                <p style="font-size: 16px;font-weight: 700;color: #fff;letter-spacing: 0.5px;margin-bottom: 5px;">
                    {{ user }}</p>
                <p style="font-size: 14px;font-weight: 400;color: #CAC4D0;letter-spacing: 0.5px;">User ID：{{ userId }}</p>
            </div>
            <div style="display: flex;flex-direction: row;">
                <el-button @click="pageToResetPwd"
                    style="border-color: #938F99;color: #107DFB;background-color: #1A1A1D;">Reset
                    password</el-button>
                <el-button @click="handleSignOut"
                    style="border-color: #938F99;color: #107DFB;background-color: #1A1A1D;">Sign out</el-button>
            </div>
        </div>
        <div class="account-plan">
            <div style="display: flex;flex-direction: column;">
                <p style="font-size: 16px;font-weight: 700;color: #fff;letter-spacing: 0.5px;margin-bottom: 5px;">Your
                    current plan：</p>
                <p style="font-size: 14px;font-weight: 400;color: #CAC4D0;letter-spacing: 0.5px;">Paid Premium Left ：6 days
                </p>
                <p style="font-size: 14px;font-weight: 400;color: #CAC4D0;letter-spacing: 0.5px;">Gift Premium Left ：5 days
                </p>
            </div>
            <el-button style="border: none;background-color: #107DFB;color: #fff;">Get more</el-button>
        </div>
        <div class="account-purchase">
            <p style="font-size: 16px;font-weight: 700;color: #fff;letter-spacing: 0.5px;margin-bottom: 5px;">Purchase
                history</p>
            <p style="font-size: 14px;font-weight: 400;color: #CAC4D0;letter-spacing: 0.5px;">1 week plan：2023/09/20
                12:11:00</p>
            <p style="font-size: 14px;font-weight: 400;color: #CAC4D0;letter-spacing: 0.5px;">1 week plan：2023/09/20
                12:11:00</p>
            <p style="font-size: 14px;font-weight: 400;color: #CAC4D0;letter-spacing: 0.5px;">1 week plan：2023/09/20
                12:11:00</p>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { info_ext, info } from '../../apis/user.js'
import local from '../../utils/local.js'
import { ElMessage } from 'element-plus'
import { ipcRenderer } from 'electron'


let user = ref('')
const userId = ref('')
const router = useRouter()
// 前往密码重置页面
const pageToResetPwd = () => {
    router.push('/setting-reset-pwd')
}

// sign out操作
const handleSignOut = () => {
    ipcRenderer.send('window-min')
    local.localClear()
    window.location.href = '/login'
}
onMounted(async () => {
    user.value = JSON.parse(local.localGet("user"))
    let res = await info_ext()
    let result = await info()
    userId.value = result.data.data.id
    console.log(result, 'result________info');
})
</script>

<style lang="scss" scoped>
.account-container {
    .account-resetpwd {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-radius: 8px;
        padding: 20px;
        background-color: #1A1A1D;
    }

    .account-plan {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-radius: 8px;
        padding: 20px;
        background-color: #1A1A1D;
        margin-top: 20px;
    }

    .account-purchase {
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        padding: 20px;
        background-color: #1A1A1D;
        margin-top: 20px;
    }
}
</style>